iT邦幫忙

2024 iThome 鐵人賽

DAY 13
1
Modern Web

元素不可思議事件簿系列 第 13

Day 13 - 如果有很多屁股也不叫buttons

  • 分享至 

  • xImage
  •  

當一鼠屁為極品,多鼠屁則可稱之為天堂。
img

圖片來源:我
雖然沒有很多倉鼠屁屁,倒是可以多摸幾下。

本篇將續紀錄鼠輩事件之buttons屬性。

鼠輩事件之buttons屬性

任何鼠輩事件發生之當下,其buttons屬性之值表事件發生同時有何點按處處於受點按之狀態。

規範原文:
During any mouse events, buttons MUST be used to indicate which combination of mouse buttons are currently being pressed, expressed as a bitmask.

不同點按處於鼠輩事件發生之同時處於受點按之狀態,其與buttons屬性之值之關係如下:
值為0,表無任何點按處受點按
值為1,表主要點按處,通常為左處
值為2,表次要點按處,通常為右處
值為4,表輔助點按處,通常為中央頭頂處,附有滾動功能

buttons屬性之值則為點按處代表之值之總和。
例如,鼠輩事件發生之同時,主要點按處與次要點按處皆處於受點按之狀態,則buttons屬性之值即為 1+2=3

以下示例挪用先前篇章紀錄之愛鼠祭壇術式,並改以取用buttons屬性改造。

先前之篇章定義變數isPressed,以紀錄鼠輩點按之狀態。其初始值為false,當鼠輩點按時更改為true,放開鼠輩時則更改為false

let isPressed = false;

function touchSeven(event) {
  isPressed = true;

  // ...
}

function getTotalLove() {
  isPressed = false;

  // ...
}

seven.addEventListener("mousedown", touchSeven);
seven.addEventListener("mouseup", getTotalLove);

而實際需判斷當下鼠輩是否受點按之處為函式之術名giveLove,因此更改giveLove之內容,當鼠輩事件buttons屬性之值為1時給予愛心。為觀察buttons屬性之值,亦在操術板印出當下buttons屬性之值。

function giveLove(event) {
  // ...

  if (event.buttons === 1 && reduceCondition) {
    showLoveBubble(square, event);
    loveValue++;
  }

  console.log(event.buttons);
}

即可完成相同之愛鼠祭壇,僅有鼠輩左處點按之同時移動鼠輩可給予愛心。
img

愛鼠祭壇2.0

需注意勿將buttonsbutton混淆。

示例之術式

https://github.com/CReticulata/2024ithome/tree/main/Day13

翻譯

鼠輩:滑鼠
點按處:按鍵
左處:左鍵
右處:右鍵
中央頭頂處:滾輪按鈕

相關連結


上一篇
Day 12 - 屁股的英文不是button
下一篇
Day 14 - 一隻鼠吸不夠可以養二隻
系列文
元素不可思議事件簿30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言